<template>
  <!--组织结构——组织新增Modal-->
  <a-modal
    title="新增操作"
    :visible="visible"
    :width="width"
    :confirmLoading="confirmLoading"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="隐藏的参数"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="display: none"
      >
      </a-form-item>
      <a-form-item
        label="机构名称"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-input
          v-decorator="[
            'name',
            {
              initialValue: dept.name,
              rules: [{ required: true, message: '请输入组织名称!' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="父节点"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-tree-select
          v-decorator="[`parentCode`]"
          placeholder="请选择所属父节点"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :treeData="treeFmt"
          :allowClear="true"
          @change="treeChange"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item
        label="备注"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-textarea
          v-decorator="['remark', {initialValue: dept.remark}]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { treeConvert } from '@/utils/antUtil'
import api from '../system.js'

export default {
  name: 'DepartmentModalAdd',
  data () {
    return {
      visible: false,
      confirmLoading: false,
      width: 800,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      dept: {},
      level: 1,
      treeData: []
    }
  },
  computed: {
    treeFmt () {
      let { treeData } = this
      treeData = treeData || []
      const tree = treeConvert(treeData)
      return tree
    }
  },
  created () {
    this.queryTree()
  },
  methods: {
    // Modal show
    showModal () {
      this.restForm()
      this.dept = {}
      this.level = 1
      this.visible = true
      this.queryTree()
    },
    // Modal hide
    hideModal () {
      this.visible = false
    },
    // Modal 确定按钮--保存
    handleModalOk () {
      this.form.validateFields((error, values) => {
        if (error === null) {
          const param = {
            ...values,
            level: this.level
          }
          this.axios.post(api.department.add, param)
            .then((response) => {
              if (response.code === 200) {
                this.$message.success('保存成功')
                // 新增成功将id回传给父组件 方便其默认选中
                this.$emit('call', response.data)
                this.hideModal()
              } else {
                this.$message.error('保存失败：' + response.message)
              }
            })
            .catch((error) => {
              this.$message.error('保存异常：' + error)
            })
        }
      })
    },
    // Modal 取消按钮
    handleModalCancel () {
      this.hideModal()
    },
    // Form 表单数据初始化方法 还原
    restForm () {
      this.form.resetFields()
    },
    // 获取组织结构树
    queryTree () {
      this.axios.post(api.department.getDepartmentTree)
        .then((res) => {
          this.treeData = res.data
        })
        .catch((error) => {
          console.log('请求异常...', error)
        })
    },
    // tree改变事件: 通过节点获取到内部参数，如下获取到存储在tree中的level数据
    treeChange (value, label, extra) {
      const level = extra.triggerNode && extra.triggerNode.label || 0
      this.level = level + 1
    }
  }
}
</script>
